<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import type { FormRules, ElForm } from 'element-plus'
import useLoginStore from '@/store/login/login'
import { localCache } from '@/utils/cache'
import { NAME, PASS_WORD } from '@/utils/token'
import { notification } from '@/utils/notification'

const KEEP_PASSWOED = 'keep'
// 定义表单内部数据
const account = reactive({
  name: localCache.getCache(NAME) ?? 'coderwhy',
  password: localCache.getCache(PASS_WORD) ?? '123456'
})

// 记住密码
const KeepPassWord = ref<boolean>(localCache.getCache(KEEP_PASSWOED))
watch(KeepPassWord, (newValue) => {
  localCache.setCache(KEEP_PASSWOED, newValue)
})

// 定义form的验证规则
const accountRules: FormRules = {
  name: [
    { required: true, message: '必须输入用户名~', trigger: 'blur' },
    { pattern: /^[a-z0-9]{6,20}$/, message: '必须是6~20个字母或数字', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '必须输入密码~', trigger: 'blur' },
    { pattern: /^[a-z0-9]{3,}$/, message: '密码必须在3位以上', trigger: 'blur' }
  ]
}

// 登录按钮动画
const isLoading = ref(false)

// 绑定表单
const formRef = ref<InstanceType<typeof ElForm>>()

// 完成点击按钮的登录逻辑
const loginStore = useLoginStore()
const handleLoginClick = () => {
  // 调用表单方法
  formRef.value?.validate((valid) => {
    if (valid) {
      // 打开loading
      isLoading.value = true

      const name = account.name
      const password = account.password
      loginStore
        .postLoginAction(name, password)
        .then(() => {
          if (KeepPassWord.value) {
            localCache.setCache(NAME, name)
            localCache.setCache(PASS_WORD, password)
          } else {
            localCache.removeCache(NAME)
            localCache.removeCache(PASS_WORD)
          }
        })
        .catch((err) => {
          notification('warning', '登录失败,请检查账号密码')
        })
        .finally(() => {
          isLoading.value = false
        })
    }
  })
}

// 点击回车执行登录逻辑
const enterKeyup = (e: any) => {
  if (e.key === 'Enter') {
    handleLoginClick()
  }
}

onMounted(() => {
  document.addEventListener('keyup', enterKeyup)
})

onUnmounted(() => {
  document.removeEventListener('keyup', enterKeyup)
})
</script>

<template>
  <div class="login">
    <div class="login-panel">
      <div class="bg"></div>
      <div class="panel-login">
        <div class="logo">
          <img src="@/assets/img/logo.png" alt="" />
          <h2>Sokach后台管理系统</h2>
        </div>
        <div class="form">
          <el-form ref="formRef" :model="account" size="large" :rules="accountRules" status-icon>
            <el-form-item prop="name">
              <el-input prefix-icon="User" v-model="account.name" />
            </el-form-item>
            <el-form-item prop="password" style="margin-bottom: 12px">
              <el-input
                prefix-icon="Lock"
                type="password"
                v-model="account.password"
                show-password
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="checkbox">
          <el-checkbox label="记住密码" v-model="KeepPassWord" />
          <el-link type="primary">忘记密码</el-link>
        </div>
        <el-button
          :loading="isLoading"
          type="primary"
          size="large"
          style="width: 100%"
          @click="handleLoginClick"
          >登 录</el-button
        >
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/img/login_background.jpg);
  background-size: cover;
  .login-panel {
    width: 96vw;
    height: 94vh;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .logo {
      display: flex;
      align-items: center;
      margin: 30px 0;
      img {
        width: 80px;
      }
      h2 {
        font-size: 30px;
        padding-left: 20px;
        font-weight: 400;
      }
    }
    .bg {
      background-image: url(@/assets/img/login_left.svg);
      background-size: cover;
      width: 40%;
      height: 60%;
    }
    .panel-login {
      width: 420px;
      background-color: #fff;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
    }
  }
  .checkbox {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
